<template>
	<div class="star">
		<uni-popup ref="popup" type="bottom" :maskClick="true">
			<div class="content">
				<div class="tab">
					<div :class="['tab-item',current == index ?'active':'']" v-for="(item,index) in tabList"
						:key="index" @click="select(index)">{{item.name}}</div>
				</div>
				<div class="search">
					<image class="search-icon" src="/static/icon/search.png" mode=""></image>
					<input type="text" v-model="keyword" placeholder="搜索" @input="changeKeyword" />
				</div>
				<scroll-view class="orderlist" scroll-y="true" style="height: 950rpx;" lower-threshold="20"
					@scrolltolower="scrollLower">
					<div class="shop-list">
						<div class="shop-item" :class="isSelected(item) ?'active':''" v-for="(item,index) in list"
							:key="index" @click="handleCheckboxChange(item)">
							<image
								v-if="item.firstFileSuffix !== 'png' && item.firstFileSuffix !== 'jpg' && item.firstFileSuffix !== 'jpge'"
								:src="item.firstCoverPath" class="buy-pic" mode="aspectFill" />
							<image v-else :src="item.firstPicturePath" class="buy-pic" mode="aspectFill" />
							<div class="shop-title">
								{{item.title}}
							</div>
							<div class="pri-wrap">
								<span class="price" v-if="item.price"><span
										class="price-icon">￥</span>{{item.price}}</span><span class="attr"
									v-if="item.freeShipping">包邮</span>
							</div>
							<image v-if="isSelected(item)" class="checked" src="/static/icon/checked.png" mode="">
							</image>
						</div>
						<!-- <uni-load-more v-if="false" :status="'loading'"
							:content-text="{contentnomore:'加载失败，请点击重试'}"></uni-load-more> -->
					</div>
				</scroll-view>
				<div class="footer-send">
					<div class="item-list">
						<!-- <div class="item-item" v-for="(item,index) in selectedData" :key="index">
							<image class="item-icon" :src="item.avatar" mode=""></image>
							<div>{{item.nickname}}</div>
						</div> -->
					</div>
					<div class="want" @click="submit">
						确认
					</div>
				</div>
			</div>

		</uni-popup>
	</div>
</template>
<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import Radio from '@/components/radio.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				page: 1,
				list_rows: 20,
				loading: false,
				list: [],
				keyword: '',
				selectedData: [],
				commentInformationId: null,
				current: 0,
				tabList: [{
					name: '我的宝贝'
				}, {
					name: 'TA的宝贝'
				}]
			}
		},
		props: {
			selected: {
				type: Array,
				default: []
			},
		},
		computed: {
			...mapState(['']),
		},
		watch: {
			selected(val) {
				this.selectedData = val
			}
		},
		mounted() {
			this.getPageList();
		},
		methods: {
			select(i) {
				this.current = i
				this.page = 1
				this.list = []
				this.getPageList()
			},
			show() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			// 检查用户是否已经被选中
			isSelected(item) {
				return this.selectedData.some(selectedData => selectedData.id === item.id);
			},
			// 更新选中用户的方法
			handleCheckboxChange(item) {
				if (this.isSelected(item)) {
					// 取消选中：从 selectedData 中移除该用户
					this.selectedData = this.selectedData.filter(
						selectedData => selectedData.id !== item.id
					);
				} else {
					// 选中：向 selectedData 添加该用户
					//多选
					// this.selectedData.push({
					// 	id: item.id,
					// });
					//单选
					this.selectedData = [item]
				}

			},
			scrollLower(e) {
				this.getPageList()
			},
			getPageList() {
				let that = this
				that.$httpRequest.get({
					that: that,
					url: that.current == 0 ? 'wechat/getMyInformationList' : 'wechat/getDiscoveryInformationList',
					params: {
						type: 2,
						pageNo: that.page,
						pageSize: that.list_rows,
						keyword: that.keyword,
					},
					success: res => {
						that.loading = false
						if (res.code === that.$httpConfig.SUCCESS_CODE) {
							if (that.page === 1) {
								that.list = res.data.rows
							} else {
								that.list = that.list.concat(res.data.rows)
							}
							that.page++
						}
					}
				})
			},
			submit() {
				this.$emit('getData', this.selectedData);
				this.close();
			},
			changeKeyword() {
				this.list = []
				this.page = 1
				this.getPageList()
			},
		},
		components: {
			uniPopup,
			Radio
		}
	};
</script>
<style scoped lang="scss">
	@import '@/style/def.scss';

	.star {
		position: fixed;
		z-index: 99999;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}


	.content {
		background: #fff;
		padding: 30rpx 0;
		box-sizing: border-box;
	}

	.shop-list {
		margin-left: 20rpx;
		padding-bottom: 120rpx;

		// height: 780rpx;
		// overflow-y: auto;
		.shop-item {
			position: relative;
			margin: 16rpx 8rpx;
			background: #F4F4F5;
			display: inline-block;
			vertical-align: top;
			width: 343rpx;
			height: 409rpx;
			border-radius: 18rpx;
			padding: 15rpx;
			box-sizing: border-box;

			image {
				width: 311rpx;
				height: 222rpx;
			}

			.shop-title {
				font-size: 28rpx;
				font-weight: normal;
				line-height: 32rpx;
				color: #000000;
				margin-bottom: 16rpx;
				@extend .nowrap2;
			}

			.pri-wrap {
				@extend .flex-row-center;

				.price {
					font-size: 42rpx;
					font-weight: normal;
					line-height: normal;
					text-align: center;
					color: #EC6A0A;

					.price-icon {
						font-weight: 400;
						font-size: 28rpx;
					}
				}

				.attr {
					margin-left: 5rpx;
					font-size: 28rpx;
					font-weight: normal;
					line-height: 32rpx;
					text-align: center;
					color: #666666;
				}
			}

			.checked {
				position: absolute;
				bottom: 28rpx;
				right: 20rpx;
				z-index: 5;
				width: 24rpx;
				height: 24rpx;
			}
		}

		.active {
			background: #FFF5EC;
		}
	}

	.search {
		background: #F4F4F5;
		border-radius: 44rpx;
		position: relative;
		width: 686rpx;
		height: 72rpx;
		margin: 30rpx auto 10rpx;

		.search-icon {
			position: absolute;
			top: 50%;
			left: 30rpx;
			transform: translateY(-50%);
			width: 42rpx;
			height: 42rpx;
		}

		input {
			width: 100%;
			height: 100%;
			line-height: 72rpx;
			font-size: 28rpx;
			padding: 0 80rpx;
			box-sizing: border-box;
		}
	}

	.footer-send {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 120rpx;
		margin: 0 auto;
		padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		z-index: 10;
		// padding-bottom: constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
		// padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
		box-sizing: border-box;

		.want {
			width: 214rpx;
			height: 70rpx;
			border-radius: 100rpx;
			background: linear-gradient(180deg, #EC6A0A 0%, #FB8E26 100%);
			font-size: 28rpx;
			font-weight: normal;
			line-height: 70rpx;
			text-align: center;
			color: #FFFFFF;
		}
	}

	.item-list {
		width: 450rpx;
		overflow-x: auto;
		display: flex;
		align-items: center;

		//隐藏滚动条
		&::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.item-item {
			width: 100rpx;
			margin-right: 10rpx;

			image {
				margin: 0 auto;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				display: block;
			}

			div {
				padding-top: 10rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #1C1C1C;
				line-height: 20rpx;
				max-width: 100rpx;
				@extend .nowrap;
			}
		}
	}

	.tab {
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 20rpx 0;

		.tab-item {
			position: relative;
			margin: 0 15rpx;
			font-size: 28rpx;
			font-weight: normal;
			line-height: 32rpx;
			text-align: center;
			color: #666666;
			padding-bottom: 12rpx;
		}

		.active {
			color: #000000;

			&::after {
				position: absolute;
				content: '';
				bottom: 0px;
				width: 100%;
				left: 0;
				height: 4rpx;
				background: #EC6A0A;
			}
		}
	}
</style>